<template>
  <div>
    <div class="app-container">
      <el-form :model="chartQueryParams" ref="chartQueryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="自定义时间段" label-width="110px" prop="dateRange">
          <el-date-picker
            v-model="chart.dateRange"
            size="small"
            style="width: 240px"
            :value-format="chart.dateValueFormat"
            :type="chart.dateType"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleChartQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetChartQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <v-chart :forceFit="true" :height="height" :data="chartData" :scale="scale" :padding="[20, 40, 60, 40]">
          <v-tooltip />
          <v-axis />
          <v-legend />
          <v-smooth-line position="coord*count" :color="['operation', ['#FD4A4A', '#7FC378']]" shape="smooth" />
          <v-point position="coord*count" :color="['operation', ['#FD4A4A', '#7FC378']]" shape="circle" />
        </v-chart>
      </div>
    </div>
    <div class="app-container">
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="操作者" align="center" prop="createBy" />
        <el-table-column label="工号/学号" align="center" prop="studentId" />
        <el-table-column label="姓名" align="center" prop="userName" />
        <el-table-column label="时间" align="center" prop="createTime" />
        <el-table-column label="IP" align="center" prop="logIp" />
        <el-table-column label="操作内容" align="center" prop="logType">
          <template slot-scope="scope">
            <span>{{ scope.row.logType === '1' ? '账号入组' : '账号出组' }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
  import { listAuthStat, listAuthChart } from './service'
  import DataSet from '@antv/data-set'
  import dayjs from 'dayjs'

  const initDateRange = () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    return [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
  }

  const scale = [
    {
      dataKey: 'coord'
    }
  ]
  export default {
    name: 'AuthStatics',
    components: {},
    data() {
      return {
        // 图表信息
        chart: {
          dateValueFormat: 'yyyy-MM-dd',
          dateRange: [],
          dateType: 'daterange'
        },
        // 图表 数据
        chartList: [],
        scale,
        height: 400,
        // select 数组
        // 遮罩层
        loading: true,
        typeOptions: ['账号入组', '账号出组'],
        accountOptions: [],
        // 选中行id
        currentRow: {},
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        tableList: [],
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        chartQueryParams: {
          beginTime: null,
          endTime: null,
          zxtTpye: '1'
        }
      }
    },
    computed: {
      chartData() {
        const dv = new DataSet.View().source(this.chartList)
        dv.transform({
          type: 'fold',
          fields: ['账号出组', '账号入组'],
          key: 'operation',
          value: 'count'
        })
        return dv.rows
      }
    },
    created() {
      this.getList()
      const dateRange = initDateRange()
      this.chart.dateRange = [...dateRange]
      this.chartQueryParams.beginTime = dateRange[0]
      this.chartQueryParams.endTime = dateRange[1]
      this.$nextTick(function() {
        this.getChartList()
      })
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true
        listAuthStat(this.queryParams)
          .then(response => {
            this.tableList = response.rows
            this.total = response.total
          })
          .finally(() => {
            this.loading = false
          })
      },
      /* 查询 图表 数据 */
      getChartList() {
        const { dateRange } = this.chart
        const params = {
          ...this.chartQueryParams,
          beginTime: dayjs(dateRange[0]).format('YYYY-MM-DD'),
          endTime: dayjs(dateRange[1]).format('YYYY-MM-DD')
        }
        listAuthChart(params).then(res => {
          if (res.code === 200 && res.data) {
            this.chartList = res.data.map((item, index) => ({
              coord: item.coord,
              账号出组: item.deleteO,
              账号入组: item.addO
            }))
          }
        })
      },
      /** 图表 搜索按钮操作 */
      handleChartQuery() {
        const { dateRange } = this.chart
        if (!dateRange || !dateRange.length) {
          this.$message.warning('请先选择时间段')
          return
        }
        this.chartQueryParams.beginTime = dateRange[0]
        this.chartQueryParams.endTime = dateRange[1]
        this.getChartList()
      },
      /**  图表 重置按钮操作 */
      resetChartQuery() {
        this.resetForm('chartQueryForm')
        const dateRange = initDateRange()
        this.chart.dateRange = [...dateRange]
        this.handleChartQuery()
      }
    }
  }
</script>
